<template>
  <div>
    <van-nav-bar
      title="产品信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-search
      placeholder="请输入产品名称"
      @search="search"
      v-model="queryParam.Keyword"
      @clear="clear"
    />
    <div class="outerBox">
      <div
        @click="Edit(item.Id)"
        class="box"
        v-for="item in data"
        :key="item.Id"
      >
        <div class="Father">
          <!-- <img
          src="http://36.156.144.139:9000/img/yuangongDef.65d8327a.jpg"
          alt=""
        /> -->
          <div>
            <div class="companyName">{{ item.cInvName }}</div>
            <div>规格:{{ item.cInvStd || "无" }}</div>
          </div>
        </div>
      </div>
    </div>
    <van-pagination
      v-model="pagination.current"
      :total-items="Total"
      @change="paginationchange"
      :items-per-page="pagination.pageSize"
    />

    <!-- <Edit :parentObj="this" ref="edit" /> -->
  </div>
</template>

<script>
import { Card } from "vant";
import { Search, NavBar, Pagination } from "vant";
// import Edit from "./Edit.vue";
export default {
  components: {
    "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search
    // Edit
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      Total: 0,
      Keyword: "",
      data: [],
      queryParam: {}
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    paginationchange(a, b) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    clear() {
      this.queryParam = [];
      this.getDataList();
    },

    onClickLeft() {
      this.$router.go(-1);
      this.queryParam = {};
    },
    onClickRight() {
      this.$refs.edit.openForm();
    },
    //弹出页面
    Edit(Id) {
      console.log("编辑", Id);
      // this.$refs.edit.openForm(Id);
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "cInvName";
      this.queryParam.Keyword = value;
      this.getDataList();
    },

    getDataList() {
      this.selectedRowKeys = [];

      this.loading = true;
      this.http
        .post("/ProductManagement/Inventory/GetDataList", {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: "Id",
          SortType: "asc",
          Search: this.queryParam
        })
        .then(resJson => {
          this.data = resJson.Data;
          this.Total = resJson.Total;
          // console.log(this.data);
        });
    }
  }
};
</script>

<style scoped>
.outerBox {
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */

  height: 700px;
  overflow: auto;
  text-align: center;
}
.companyName {
  margin-bottom: 5px;
  font-size: 18px;
}
.box {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  width: 80%;
  margin: 0 auto;
  /* height: 150px; */
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
img {
  width: 100px;
  height: 100px;
}
.Father {
  /* display: flex; */
}
</style>
